
<!--<script src="//cdn.bootcss.com/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<link href="//cdn.bootcss.com/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">-->

<script type="text/javascript">
	Vue.component('deploy',{
		template:'#deploy',
		data:function () {
			
			accounts = {{accounts | safe}} //[{label:"haha",value:"jj",pk:'1'}]
			
			if(!studio.deploy_account){
				studio.deploy_account=accounts[0].pk
			}
			this.get_log()
			return {
				studio:studio,
				accounts:accounts,
				logs:[],
			}
		},
		methods:{
			get_log:function () {
				var self=this;
				var post_data={
					get_studio_log:{studio_name:studio.name}
				}
				$.post('',JSON.stringify(post_data),function (data) {
					self.logs=data.get_studio_log
				})
			},
			manual_deploy:function () {
				var self=this;
				var post_data={
					order:['deploy_studio_manual','get_studio_log'],
					deploy_studio_manual:{studio_name:this.studio.name},
					get_studio_log:{studio_name:studio.name}
				}
				show_uploading()
				$.post('',JSON.stringify(post_data),function (data) {
					hide_uploading()
					self.logs=data.get_studio_log
				})
			}

		}
	})

</script>
<!--<script type="text/javascript">
	$(function () {
		$("[name='my-checkbox']").bootstrapSwitch('state',studio.auto_deploy=='yes');
		$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
		  studio.auto_deploy=state?'yes':'no'
		});
	})
	
</script>-->
<style>
	.deploy_left{
		width: 50%;
		box-shadow: 0 0 5px rgba(153, 153, 153, 0.6);
		padding: 30px 20px;
		min-height: 600px;
	}
	#deploy_log{
		position: fixed;
		right: 120px;
		top: 235px;
		width: 30%;
		padding: 15px;
		border-radius: 5px;
		background: #ffffff;
		max-height: 500px;
		overflow: auto;
		min-height: 300px;
		box-shadow: 0 0 5px rgba(153, 153, 153, 0.5);
	}
	#deploy_log li{
		/*list-style-type: square;*/
		margin: 8px auto;
	}
	#deploy_log li img{
		margin-top: -2px;
		margin-right: 4px;
	}
	.f_size label{
		font-size: 16px;
		font-weight: 600;
		color: #888888;
	}
	.domain{
		margin-top: 15px;
	}
	.domain input{
		max-width: 360px;
	}
	input[type="radio"]{
		width: 15px;
		height: 15px;
		margin: 2px 5px 8px 0;

	}
</style>
<template id='deploy'>
<div>
	<div class="deploy_left">
		<!--<field name='deploy_account' :options='accounts' :get_value='get_value',:get_label='get_label'></field>-->
		<field name='deploy_account' class="f_size">
			<select slot='field-input' id='id_deploy_account' v-model='studio.deploy_account'>
				<option v-for='option in accounts' :value='option.pk'>[[option.account]]</option>
			</select>
		</field>

		<div>
			<h3 style="padding: 0;color: #888888">Auto Deploy</h3>
			<!--Auto deploy-->
			<!--<input type="checkbox" name="my-checkbox" v-model='studio.auto_deploy' :true-value='"yes"' :false-value='"no"'>-->
				<!--OR-->
			<!--<button type="button" class="btn btn-primary" name="my-checkbox" v-model='studio.auto_deploy' :true-value='"yes"' :false-value='"no"'>Auto deploy</button>-->
			<!--or-->
			<label>
				<input type="radio" name="autoDeploy" value="yes" v-model='studio.auto_deploy'/>YES
			</label>
			<label>
				<input type="radio" name="autoDeploy" value="no" v-model='studio.auto_deploy'/>NO
			</label>
			<button name="test" type="button" class="btn btn-success" v-show='studio.auto_deploy=="no"' @click='manual_deploy()'>Manual deploy (Right Now)</button>
		</div>
		<div class="interval"></div>
		<div class="domain f_size">
			<field name='domain'>
				Please set the studio domain name before deploy!
			</field>
		</div>
	</div>


	<div id='deploy_log'>
		<ul>
			<li v-for='log in logs'>
				<img :src="'/static/image/'+log.type+'.png'" alt="" style='width:10px;height:10px;'>
				<span v-text='log.time'></span>
				<span v-text='log.title'></span>
			</li>
		</ul>
	</div>
</div>
</template>

<script type="text/javascript">

</script>
	